<template>
  <!-- 商品详情页面 -->
  <div class="product_detail">
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="skyblue">
      <van-swipe-item v-for="item in detailBanner" :key="item.id"
        ><img
          :src="item.img_url"
          alt=""
          width="100%"
          :style="{ display: 'block' }"
      /></van-swipe-item>
    </van-swipe>
    <van-row class="tips">
      <van-col span="8"><van-icon name="checked" />30天无忧退货</van-col>
      <van-col span="8"><van-icon name="checked" />48小时快速退费</van-col>
      <van-col span="8"><van-icon name="checked" />满88元免邮费</van-col>
    </van-row>
    <!-- 商品标题 -->
    <div class="product_info">
      <h3>{{ detailInfo.name }}</h3>
      <div>{{ detailInfo.goods_brief }}</div>
      <p>{{ Number(detailInfo.retail_price) | RMB }}</p>
    </div>
    <van-cell is-link @click="isShowSku = !isShowSku">展示弹出层</van-cell>
    <!-- 商品参数 -->
    <div class="detail_attribute">
      <h3 :style="{ lineHeight: '50px', fontSize: '16px' }">商品参数</h3>
      <van-row
        v-for="(item, index) in detailAttribute"
        :key="index"
        class="detail_attribute_info"
      >
        <van-col span="6" class="text_left">{{ item.name }}</van-col>
        <van-col span="18" class="attribute_val">{{ item.value }}</van-col>
      </van-row>
    </div>
    <!-- 产品信息 -->
    <div v-html="detailInfo.goods_desc" class="goodsBox"></div>
    <!-- 常见问题 -->
    <div class="issue">
      <div class="mytitle">
        <van-divider
          :style="{ color: '#000', borderColor: '#ccc', padding: '0 90px' }"
        >
          <h3>常见问题</h3>
        </van-divider>
      </div>
      <ul>
        <li v-for="item in detailIssue" :key="item.id">
          <h3><i></i>{{ item.question }}</h3>
          <div>{{ item.answer }}</div>
        </li>
      </ul>
    </div>
    <!-- 大家都在看 -->
    <div :style="{ backgroundColor: '#fff' }">
      <div class="mytitle">
        <van-divider
          :style="{ color: '#000', borderColor: '#ccc', padding: '0 90px' }"
        >
          <h3>大家都在看</h3>
        </van-divider>
      </div>
      <van-grid :border="false" :column-num="2">
        <van-grid-item
          v-for="item in relatedGoodsList"
          :key="item.id"
          @click="toProductDetail(item.id)"
        >
          <van-image :src="item.list_pic_url" />
          <p class="cg_name">{{ item.name }}</p>
          <p class="ng_price" :style="{ color: 'brown' }">
            {{ item.retail_price | RMB }}
          </p>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 商品规格弹出层 -->
    <van-sku
      ref="sku"
      v-model="isShowSku"
      :sku="sku"
      :goods="goods"
      :hide-stock="sku.hide_stock"
    />
    <!-- 商品导航 -->
    <AppGoodAction
      @changeIsShowSku="changeIsShowSku"
      :goodsCount="goodsCount"
    />
  </div>
</template>

<script>
import AppGoodAction from "@/components/AppGoodAction";
import {
  GetProductDeteilData,
  GetProductrelatedData,
  GetGoodScount,
  AddtoCart,
  GetgoodsItemData
} from "@/request/api";
export default {
  data() {
    return {
      isShowSku: false,
      sku: {
        tree: [],
        hide_stock: false, // 设置库存不隐藏
        price: "1.00", // 默认价格（单位元）
        stock_num: 227, // 商品总库存
      },
      goods: {
        picture: "",
      },
      productList: [],
      //-----------------
      detailBanner: [],
      detailInfo: [],
      isShowShopmodel: false,
      detailAttribute: [],
      detailIssue: [],
      relatedGoodsList: [],
      //购物车数量
      goodsCount: 0,
    };
  },
  methods: {
    changeIsShowSku() {
      // 点击的时候，如果sku显示的，直接把商品加入购物车
      if (this.isShowSku) {
        // 执行加入购物车操作
        // 1、获取sku中的步进器中的数字
        console.log(this.$refs.sku.getSkuData().selectedNum);
        let selectedNum = this.$refs.sku.getSkuData().selectedNum;
        // 2、发送加入购物车请求
        AddtoCart({
          goodsId: this.$route.query.id,
          productId: this.productList[0].id,
          number: selectedNum,
        }).then((res) => {
          console.log(res.data.cartTotal);
          this.goodsCount = res.data.cartTotal.goodsCount;
          this.$toast.success('成功添加');
          // 跳转到购物车页面
          setTimeout(() => {
            this.$router.push("/cart");
          }, 1000);
        });
      }
      this.isShowSku = !this.isShowSku;
    },
    toProductDetail(val) {
      // 跳转到商品详情页
      // 跳转时把对应的id带上，也就是产品id
      this.$router.push("/productDetail?id=" + val);

      setTimeout(() => {
        this.$router.go(0);
      }, 100);
    },
  },
  components: {
    AppGoodAction,
  },
  created() {
    GetProductDeteilData({
      id: this.$route.query.id,
    }).then((res) => {
      console.log(res);
      if (res.errno == "0") {
        console.log(res.data);
        this.detailBanner = res.data.gallery;
        this.detailInfo = res.data.info;
        this.detailAttribute = res.data.attribute;
        this.detailIssue = res.data.issue;
        // 获取sku数据
        this.sku.price = res.data.info.retail_price;
        this.sku.stock_num = res.data.info.goods_number;
        this.goods.picture = res.data.info.list_pic_url;
        this.productList = res.data.productList;
      } else {
        console.log(res.errmsg);
      }
    });
    // 请求大家都再看数据
    GetProductrelatedData({
      id: this.$route.query.id,
    }).then((res) => {
      console.log(res);
      if (res.errno == "0") {
        this.relatedGoodsList = res.data.goodsList;
      }
    });
    // 请求购物车数量数据
    GetGoodScount().then((res) => {
      // console.log(res.data.cartTotal.goodsCount);
      this.goodsCount = res.data.cartTotal.goodsCount;
    });
  },
};
</script>
 
<style lang = "less" scoped>
/* .van-popup--bottom{
    safe-area-inset-bottom
} */
h3 {
  font-size: 0.16rem;
  font-weight: normal;
}
.tips {
  height: 0.28rem;
  line-height: 0.28rem;
  text-align: center;
  .van-icon {
    position: relative;
    top: 2px;
    margin-right: 4px;
    color: darkred;
  }
}
.product_info {
  background-color: #fff;
  padding: 0.2rem 0;
  line-height: 0.4rem;
  text-align: center;
  border-bottom: 1px solid #ccc;

  p {
    font-size: 0.15rem;
    color: brown;
  }
}
.detail_attribute {
  background-color: #fff;
  padding: 0.1rem 0.18rem;
  margin-top: 0.2rem;
  .detail_attribute_info {
    height: 0.4rem;
    line-height: 0.4rem;
    background-color: #efefef;
    margin-bottom: 0.1rem;
    .text_left {
      text-align: right;
      padding-right: 0.1rem;
      font-size: 0.12rem;
      color: #666;
    }
    .attribute_val {
      padding-right: 0.1rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 0.18rem;
    }
  }
}
.goodsBox {
  /deep/img {
    width: 100%;
    display: block;
  }
}
.mytitle {
  .van-divider {
    margin: 0;
    height: 0.5rem;
    line-height: 0.5rem;
    h3 {
      margin: 0 0.05rem;
      font-size: 0.16rem;
    }
  }
  .van-divider::after,
  .van-divider::before {
    border-width: 2px;
  }
}
.issue {
  background-color: #fff;
  ul {
    padding: 0 4%;
    li {
      h3 {
        margin-bottom: 0.1rem;
        position: relative;
        padding-left: 0.2rem;
        i {
          position: absolute;
          bottom: 50%;
          left: 0;
          height: 0.04rem;
          width: 0.04rem;
          margin-top: 0.02rem;
          background-color: red;
        }
      }
      div {
        padding: 0 0 0.1rem 0.2rem;
        font-size: 0.12rem;
        color: #666;
      }
    }
  }
}
</style>